<style type="text/css">
    .right-box
    {
        border: 1px solid #E3E3E3;
        height: 600px;
        margin-left: 15px;
        position: absolute;
        top: 45px;
        width: 610px;
    }
    .box-large-line
    {
        background: none repeat scroll 0 0 #E3E3E3;
        clear: both;
        float: left;
        height: 20px;
        width: 100%;
    }
    .box-large-img
    {
        clear: both;
        float: left;
        height: 500px;
        text-align: center;
        width: 100%;
    }
    .small_img img
    {
        height: 70px;
        width: 70px;
    }
    .box-menu ul li
    {
        list-style: none outside none;
        float: left;
        margin-right: 15px;
    }
    .Menubox li
    {
        font-size: 14px;
        list-style: none outside none;
        background: url("http://pic.hkyrd.com/var/albums/Share/tem1/ReturnsWarrant.gif") no-repeat scroll center center transparent;
        color: #000000;
        cursor: pointer;
        float: left;
        font-weight: bold;
        height: 24px;
        margin-right: 8px;
        padding: 0;
        text-align: center;
    }
    .Menubox li.hover
    {
        background: url("http://pic.hkyrd.com/var/albums/Share/tem1/ReturnsWarrant1.gif") no-repeat scroll center center transparent;
        color: #000000;
        cursor: pointer;
        float: left;
        font-weight: bold;
        height: 24px;
        line-height: 23px;
        padding: 0;
    }
    #bottom-left
    {
        clear: left;
        float: left;
        height: 400px;
        margin-top: 17px;
        width: 165px;
    }
    .bottom-rihgt-menu
    {
        background: url("http://pic.hkyrd.com/var/albums/Share/tem1/Green%2520Line.jpg") repeat-x scroll left bottom transparent;
        clear: both;
        float: right;
        height: 45px;
        width: 770px;
    }
    .detail
    {
        border-bottom: 1px solid #E3E3E3;
        border-left: 1px solid #E3E3E3;
        border-right: 1px solid #E3E3E3;
        clear: both;
        color: #000000;
        display: inline;
        float: right;
        height: 500px;
        line-height: 160%;
        margin: auto;
        overflow-y: scroll;
        width: 768px;
    }
    #LeftPanel p, #LeftPanel a, #LeftPanel ul li, #LeftPanel
    {
        color: #ACACAC;
        font: 12px/16px Verdana, Geneva, Sans-serif;
        text-align: left;
    }
</style>
<script type="text/javascript">
    var speed = 30;
    var TopMyMar;
    var DownMyMar
    function MarqueeTop() {
        clearInterval(DownMyMar)
        clearInterval(TopMyMar)
        demo2.innerHTML = demo1.innerHTML
        function Marquee() {
            if (demo2.offsetTop - demo.scrollTop <= 0)
                demo.scrollTop -= demo1.offsetHeight;
            else
                demo.scrollTop++;
        }
        TopMyMar = setInterval(Marquee, speed)
        demo.onmouseover = function () { clearInterval(TopMyMar) }
        demo.onmouseout = function () { TopMyMar = setInterval(Marquee, speed) }
    }
    MarqueeTop();
    function MarqueeDown() {
        clearInterval(DownMyMar)
        clearInterval(TopMyMar)
        demo2.innerHTML = demo1.innerHTML
        demo.scrollTop = demo.scrollHeight
        function Marquee() {
            if (demo1.offsetTop - demo.scrollTop >= 0)
                demo.scrollTop += demo2.offsetHeight
            else {
                demo.scrollTop--
            }
        }
        DownMyMar = setInterval(Marquee, speed)
        demo.onmouseover = function () { clearInterval(DownMyMar) }
        demo.onmouseout = function () { DownMyMar = setInterval(Marquee, speed) }
    }
    function setTab(n, c, l) {
        for (i = 1; i < l + 1; i++) {
            document.getElementById("con_" + n + "_" + i).style.display = "none";
            var obj = document.getElementById(n + i);
            obj.setAttribute("class", "");
            obj.setAttribute("className", "");
        }
        document.getElementById("con_" + n + "_" + c).style.display = "block";

        var obj = document.getElementById(n + c);
        obj.setAttribute("class", "hover");
        obj.setAttribute("className", "hover");
    }
</script>
<div id="wrap">
    {%logo%}
    <div id="warp-center">
        <div id="left" style="width: 165px; float: left;">
            <div id="LeftPanel" class="left-top">
                <div style="background: url('http://pic.hkyrd.com/var/albums/Share/tem1/ProductCategoeries.jpg') no-repeat scroll 0 0 transparent;
                    color: #000; height: 26px; margin-bottom: 14px; padding-top: 5px; text-align: center;
                    width: 165px;">
                    <span>Product Categoeries</span></div>
                <table style="background-color: #282828;" width="100%">
                    {%category%}</table>
            </div>
        </div>
        <div style="clear: right; float: left; height: 668px; padding: 0; position: relative;
            width: 785px;">
            <div style="clear: both; float: left; height: 35px; padding-top: 10px; width: 785px;">
                <div class="title2">
                    <span>{%title%}</span></div>
            </div>
            <div id="right-box">
                <div class="right-box">
                    <div class="box-large-img">
                        {%mainimg%}
                    </div>
                    <div class="box-large-line">
                    </div>
                    <div class="box-menu">
                        <ul>
                            <li class="small_img">
                                <div align="center">
                                    <a onclick="document.pic.src=document.p1.src" onmouseover="document.pic.src=document.p1.src"
                                        href="javascript:;">{%img1%}</a></div>
                            </li>
                            <li class="small_img">
                                <div align="center">
                                    <a onclick="document.pic.src=document.p2.src" onmouseover="document.pic.src=document.p2.src"
                                        href="javascript:;">{%img2%}</a>
                                </div>
                            </li>
                            <li class="small_img">
                                <div align="center">
                                    <a onclick="document.pic.src=document.p3.src" onmouseover="document.pic.src=document.p3.src"
                                        href="javascript:;">{%img3%}</a></div>
                            </li>
                            <li class="small_img">
                                <div align="center">
                                    <a onclick="document.pic.src=document.p4.src" onmouseover="document.pic.src=document.p4.src"
                                        href="javascript:;">{%img4%}</a>
                                </div>
                            </li>
                            <li class="small_img">
                                <div align="center">
                                    <a onclick="document.pic.src=document.p5.src" onmouseover="document.pic.src=document.p5.src"
                                        href="javascript:;">{%img5%}</a>
                                </div>
                            </li>
                            <li class="small_img">
                                <div align="center">
                                    <a onclick="document.pic.src=document.p6.src" onmouseover="document.pic.src=document.p6.src"
                                        href="javascript:;">{%img6%}</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div style="border-left: 1px solid #E3E3E3; height: 612px; position: absolute; right: 0;
                top: 45px; width: 140px;">
                <div class="hot-sale-title">
                    HOT SALE</div>
                <span id="prev" onclick="MarqueeTop()" style="background: url('http://pic.hkyrd.com/var/albums/Share/tem1/RightAboveicon2.jpg') no-repeat scroll center center transparent;
                    cursor: pointer; float: left; height: 20px; width: 140px;">&nbsp;</span>
                <div id="demo" align="center" style="float: left; font-size: 10px; height: 526px;
                    line-height: 1.4em; overflow: hidden; width: 130px;">
                    <div id="demo1">
                        {%hot%}
                    </div>
                    <div id="demo2">
                    </div>
                </div>
                <span id="next" onclick="MarqueeDown()" style="background: url('http://pic.hkyrd.com/var/albums/Share/tem1/Rightnexticon2.jpg') no-repeat scroll center center transparent;
                    cursor: pointer; float: left; height: 20px; width: 140px;">&nbsp;</span>
            </div>
        </div>
    </div>
    <div id="warp-bottom">
        <div id="bottom-left">
            <div class="left-top">
                <div style="background: url('http://pic.hkyrd.com/var/albums/Share/tem1/ProductCategoeries.jpg') no-repeat scroll 0 0 transparent;
                    height: 26px; padding-top: 5px; text-align: center; width: 165px;">
                    <span>Contact Us</span></div>
            </div>
            <div style="border-bottom: 1px solid #E3E3E3; border-left: 1px solid #E3E3E3; border-right: 1px solid #E3E3E3;
                text-align: center; width: 163px;">
                <div style="border-bottom: 1px dashed #E3E3E3; height: 45px; margin: 0 auto; width: 145px;">
                    <div style="float: left; height: 100%; width: 40px; text-align: left;">
                        <img src="http://pic.hkyrd.com/var/albums/Share/tem1/ACCaddress.png"></div>
                    <div style="float: left; font-size: 11px; height: auto; line-height: 1.5em; padding-top: 6px;
                        text-align: left; width: 105px;">
                        Shenzhen GuangDong, China</div>
                </div>
                <div style="border-bottom: 1px dashed #E3E3E3; height: 45px; margin: 0 auto; width: 145px;">
                    <div style="float: left; height: 100%; width: 40px; text-align: left;">
                        <img src="http://pic.hkyrd.com/var/albums/Share/tem1/WorkTime.gif"></div>
                    <div style="float: left; font-size: 11px; height: auto; line-height: 1.5em; padding-top: 6px;
                        text-align: left; width: 105px;">
                        <span style="color: rgb(102, 102, 255);">Work Time:</span><br>
                        Monday - Saturday</div>
                </div>
                <div style="clear: both;">
                </div>
            </div>
            <div id="bottom-bottom">
            </div>
        </div>
        <div id="bottom-rihgt" style="clear: right; display: inline; float: left; height: 550px;
            padding: 0; width: 785px;">
            <div id="bottom-rihgt-title" style="clear: both; float: right; height: 45px; width: 770px;">
                <div class="bottom-rihgt-menu">
                    <div class="Menubox">
                        <ul>
                            <li id="one1" style="width: 74px;" onmouseover="setTab('one',1,7)" onclick="setTab('one',1,7)"
                                class="hover">Details</li>
                            <li id="one2" style="width: 142px;" onmouseover="setTab('one',2,7)" onclick="setTab('one',2,7)">
                                Returns & Warranty</li>
                            <li id="one3" style="width: 131px;" onmouseover="setTab('one',3,7)" onclick="setTab('one',3,7)">
                                Shipping Policy</li>
                            <li id="one4" style="width: 78px;" onmouseover="setTab('one',4,7)" onclick="setTab('one',4,7)">
                                Payment</li>
                            <li id="one5" style="width: 75px;" onmouseover="setTab('one',5,7)" onclick="setTab('one',5,7)">
                                Replies</li>
                            <li id="one6" style="width: 87px;" onmouseover="setTab('one',6,7)" onclick="setTab('one',6,7)">
                                Feedback</li>
                            <li id="one7" style="width: 60px;" onmouseover="setTab('one',7,7)" onclick="setTab('one',7,7)">
                                FAQ</li>
                        </ul>
                    </div>
                </div>
                <div id="con_one_1" class="hover detail">
                    <div style="width: auto; padding: 10px;">
                        {%Description%} {%Package%}
                    </div>
                </div>
                <div id="con_one_2" style="display: none;" class="detail">
                    <div style="width: auto; padding: 10px;">
                        {%Returns%}
                    </div>
                </div>
                <div id="con_one_3" style="display: none;" class="detail">
                    <div style="width: auto; padding: 10px;">
                        {%Shipping%}
                    </div>
                </div>
                <div id="con_one_4" style="display: none;" class="detail">
                    <div style="width: auto; padding: 10px;">
                        {%Payment%}
                    </div>
                </div>
                <div id="con_one_5" style="display: none;" class="detail">
                    <div style="width: auto; padding: 10px;">
                        {%Replies%}
                    </div>
                </div>
                <div id="con_one_6" style="display: none;" class="detail">
                    <div style="width: auto; padding: 10px;">
                        {%Feedback%}
                    </div>
                </div>
                <div id="con_one_7" style="display: none;" class="detail">
                    <div style="width: auto; padding: 10px;">
                        {%FAQ%}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="clear: both;"><h4>Releated Product</h4>
   <table> {%releated%}</table></div>
